<script setup lang="tsx">
import { reactive, inject, defineComponent, onMounted, ref, markRaw, type Component } from 'vue'
import { ElRow, ElCol, ElSteps, ElStep, ElMessage, type StepProps } from 'element-plus'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi, getSignApi, getPutApi } from '@/api/document'
import { BaseButton } from '@/components/Button'

import Auditing from './modules/Auditing.vue'
import SignFor from './modules/SignFor.vue'
import Warehousing from './modules/Warehousing.vue'
import Refuse from './modules/Refuse.vue'
import Complete from './modules/Complete.vue'

const currentRow: any = inject('currentRow')
const emit = defineEmits(['close', 'get-list'])
const reset = async () => {
  const res = await getDetailApi(currentRow.id)
  if (res) {
    res.data.info.details = res.data.info.details.map((val) => {
      const resultArray = val.goods.img.split(',')
      return {
        ...val,
        imgList: resultArray[0]
      }
    })
    Object.assign(detailData, res.data.info)
    currentTable.value = comId[res.data.info.order_status]
  }
}

// 获取详情数据
const loading = ref(true)
const detailData = reactive({})
const getDetail = async () => {
  loading.value = true
  const res = await getDetailApi(currentRow.id)
  if (res) {
    res.data.info.details = res.data.info.details.map((val) => {
      const resultArray = val.goods.img.split(',')
      return {
        ...val,
        imgList: resultArray[0]
      }
    })
    Object.assign(detailData, res.data.info)
    currentTable.value = comId[res.data.info.order_status]
    loading.value = false
  }
}
// table
const comId = reactive({
  1: markRaw(Auditing),
  2: markRaw(SignFor),
  3: markRaw(Warehousing),
  4: markRaw(Refuse),
  5: markRaw(Complete)
})
const currentTable = ref(comId[1])

// 进度条
const Setp = defineComponent({
  setup() {
    const statusMap: StepProps[][] = [
      [
        {
          title: '已提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        { title: '待审核', status: 'process', description: '' },
        { title: '待签收', status: 'wait', description: '' },
        { title: '待入库', status: 'wait', description: '' },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '已提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已审核',
          status: 'success',
          description: detailData.order_log[1] ? detailData.order_log[1].create_time : ''
        },
        { title: '待签收', status: 'process', description: '' },
        { title: '待入库', status: 'wait', description: '' },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '已提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已审核',
          status: 'success',
          description: detailData.order_log[1] ? detailData.order_log[1].create_time : ''
        },
        {
          title: '已签收',
          status: 'success',
          description: detailData.order_log[2] ? detailData.order_log[2].create_time : ''
        },
        { title: '待入库', status: 'wait', description: '' },
        { title: '待完成', status: 'wait', description: '' }
      ],
      [
        {
          title: '已提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已拒绝',
          status: 'error',
          description: detailData.order_log[1] ? detailData.order_log[1].create_time : ''
        }
      ],
      [
        {
          title: '已提交',
          status: 'success',
          description: detailData.order_log[0] ? detailData.order_log[0].create_time : ''
        },
        {
          title: '已审核',
          status: 'success',
          description: detailData.order_log[1] ? detailData.order_log[1].create_time : ''
        },
        {
          title: '已签收',
          status: 'success',
          description: detailData.order_log[detailData.order_log.length - 2]
            ? detailData.order_log[detailData.order_log.length - 2].create_time
            : ''
        },
        {
          title: '已入库',
          status: 'success',
          description: detailData.order_log[detailData.order_log.length - 1]
            ? detailData.order_log[detailData.order_log.length - 1].create_time
            : ''
        },
        {
          title: '已完成',
          status: 'success',
          description: detailData.order_log[detailData.order_log.length - 1]
            ? detailData.order_log[detailData.order_log.length - 1].create_time
            : ''
        }
      ]
    ]
    const index = detailData.order_status - 1
    const active = statusMap[index].findIndex((item) => item.status === 'error')
    return () => (
      <>
        <p>进货单进度条</p>
        <ElSteps active={active === -1 ? statusMap[index].length : active + 1} align-center>
          {statusMap[index].map((item) => {
            return <ElStep title={item.title} status={item.status} description={item.description} />
          })}
        </ElSteps>
        {detailData.order_status === 4 ? (
          <>
            <p>拒绝原因</p>
            <p>{detailData.remark}</p>
          </>
        ) : undefined}
      </>
    )
  }
})

// 返回上一步
const previous = async () => {
  detailData.order_status = 2
  currentTable.value = comId[2]
}

// 签收
const signForLoading = ref(false)
const signFor = async () => {
  signForLoading.value = true
  const res = await getSignApi({ id: currentRow.id })
  if (res) {
    signForLoading.value = false
    ElMessage.success(res.msg)
    emit('close')
    emit('get-list')
  } else {
    signForLoading.value = false
  }
}
// 入库
const warehousingLoading = ref(false)
const warehousing = async () => {
  warehousingLoading.value = true
  const res = await getPutApi({ id: currentRow.id })
  if (res) {
    warehousingLoading.value = false
    ElMessage.success(res.msg)
    emit('close')
    emit('get-list')
  } else {
    warehousingLoading.value = false
  }
}
onMounted(() => getDetail())
</script>

<template>
  <ContentDetailWrap title="采购单详情">
    <component
      :is="currentTable"
      @get-list="reset"
      :dataList="detailData.details"
      v-if="!loading"
    />
    <ElRow class="mt-[20px]" :gutter="20" v-if="!loading">
      <ElCol :span="12">单据备注：{{ detailData.remark }}</ElCol>
    </ElRow>
    <template #footer>
      <div class="mt-[20px]" v-if="!loading">
        <Setp />
      </div>
      <div class="w-full flex items-center justify-center mt-[20px]">
        <BaseButton @click="emit('close')">关闭</BaseButton>
        <template v-if="!loading">
          <BaseButton
            type="warning"
            :loading="signForLoading"
            @click="signFor()"
            v-if="detailData.order_status === 2"
            >确定签收</BaseButton
          >
          <BaseButton
            type="warning"
            :loading="warehousingLoading"
            @click="warehousing()"
            v-if="detailData.order_status === 3"
            >确定入库</BaseButton
          >
          <BaseButton @click="previous()" v-if="detailData.order_status === 3"
            >返回上一步</BaseButton
          >
        </template>
      </div>
    </template>
  </ContentDetailWrap>
</template>
